<!--suppress ALL -->
<template>
  <div>
    <div>
        <el-dialog :title='"当前位置"+currentUpdateTitle'  :visible.sync="dialogUpdateVisible" width="40%">
          <el-form :model="buildingForm" status-icon ref="buildingForm">
            <el-form-item label="区域名称" :label-width="formLabelWidth" prop="measureSiteName">
              <el-input v-model="buildingForm.measureSiteName" autocomplete="off" style="width:83%"></el-input>
            </el-form-item>
            <el-form-item label="检查项" :label-width="formLabelWidth">
              <el-input value="设备安装" autocomplete="off" style="width:83%" :disabled="true"></el-input>
            </el-form-item>
             <el-form-item label="检查人" :label-width="formLabelWidth" prop="jasoUserId">
              <el-select v-model="buildingForm.jasoUserId" placeholder="请选择检查人" style="width:83%">
                <el-option
                  v-for="item in informUserList"
                  :key="item.jasoUserId"
                  :label="item.userRealName"
                  :value="item.jasoUserId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="户型图纸切换" :label-width="formLabelWidth" prop="apartmentId">
              <el-select v-model="buildingForm.apartmentId" placeholder="请选择户型图纸" style="width:83%">
                <el-option
                  v-for="item in measurePaperList"
                  :key="item.apartmentId"
                  :label="item.measurePaperName"
                  :value="item.apartmentId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('form')">取 消</el-button>
            <el-button type="primary" @click="submit('form')">确 定</el-button>
          </div>
        </el-dialog>
      <!-- 新增弹出框底层 -->
        <el-button type="danger" @click="deleteSelect" style="margin:10px 5px; float:right;">删除选中</el-button>
        <el-button type="primary" @click="initInfoList" style="margin:10px 5px; float:right;">数据初始化</el-button>
    </div>
    <div style="float:left">
      <image-record-left :buildingDataList="buildingDataList" @nowItem='newItem' :nowSelectd="selectIndex" style="margin-top:60px;width: 20%;"/>
    </div>
    <div style="float:left;width: 80%;">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        :row-class-name="tableRowClassName"
         @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="measureSiteName"
          label="楼层区域">
        </el-table-column>
        <el-table-column
          prop="majorType"
          label="专业类型">
          <template>
            {{'设备安装'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="apartmentName"
          label="户型名称">
        </el-table-column>
        <el-table-column prop="allNum" label="测量点">
            <template slot-scope="scope">
                {{scope.row.doneNum}}{{' / '}}{{scope.row.allNum}}
            </template>
        </el-table-column>
        <el-table-column
          prop="userRealName"
          label="检查人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          :formatter="formatDate">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="check(scope.row)" v-if="scope.row.doneNum>0">查看</el-button>
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
            <el-button type="text" style="color:red;" @click="deleteSelects(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMeasureSiteBuildingList,
    getMeasureSiteListByPid,
    getMeasureBuildingInfoList,
    initInfoList,
    getRoomInfoList,
    deleteMeasureSite,
    getMeasurePaperInfoList,
    updateMeasureSiteInfoByMeasureSiteId,
    getAboutUserList
  } from '@/api/measure'
  import { mapGetters } from 'vuex'
  import ImageRecordLeft from '../components/ImageRecordLeft'
  import { formatDate1 } from '@/api/project'

  var pageParams = { page: { pageSize: 10, pageNo: 1 } }
  export default {
    components: {
      ImageRecordLeft
    },
    computed: {
      ...mapGetters([
        'currentProject',
        'projects',
        'userInfo'
      ])
    },
    watch: {
      currentProject: function(n, o) {
        this.initDatas()
      }
    },
    data() {
      return {
        loading:true,
        informUserList: [],
        selectIndex: 0,
        buildingList: [],
        buildingDataList: [],
        showBuildingDataList: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        tableData: [],
        /*新增弹出框操作*/
        dialogUpdateVisible:false,
        currentProjectBuildingId:'',
        currentBuildingName:'',
        buildingForm: {
          measureSiteId: '',
          measureSiteName: '',
          projectId: '',
          apartmentId:'',
          jasoUserId:'',
          majorType: 1,
          siteType: 1,
          projectBuildingId: ''
        },
        currentUpdateTitle:'',
        formLabelWidth: '120px',
        //////////////////////////
        /*选中删除*/
        multipleSelection: [],
        selected: '',
        measurePaperList:''
      }
    },
    methods: {
      //获取所有的户型图纸
      getMeasurePaperList(){
           var projectId = this.currentProject.projectId;
           getMeasurePaperInfoList({ 'projectId': projectId }).then(res =>{
             debugger
             this.measurePaperList = res.data;
           })
      },
      //检查人列表获取
      getInformUserList() {
        var projectId = this.currentProject.projectId;
        getAboutUserList({ 'projectId': projectId }).then(res => {
          this.informUserList = res.data
        }).catch(res => {

        })
      },
      check(row){
        console.log("查看图纸的点位")
      },
      update(row){
        debugger
        this.buildingForm = Object.assign({}, row);
        this.getMeasurePaperList();
        this.getInformUserList();
        this.currentUpdateTitle = this.currentBuildingName+"-"+row.measureSiteName;
        this.dialogUpdateVisible=true
      },
      initInfoList(){
        this.$confirm('您确定覆盖现有数据吗？').then(_ => {
            initInfoList({'projectId':this.currentProject.projectId}).then(res=>{
              this.getMeasureBuildingInfo();
            })
        }).catch(_ => {
        })
        
      },
       //获取楼栋数据
      getMeasureBuildingInfo(){
        getMeasureBuildingInfoList({'projectId': this.currentProject.projectId}).then(res =>{
          this.loading=false;
          this.buildingDataList = res.data;
          if(res.data.length>0){
            this.getRoomList(res.data[0].projectBuildingId);
            this.currentProjectBuildingId=res.data[0].projectBuildingId;
            this.currentBuildingName = res.data[0].projectBuildingName;
          }
        })
      },
      //获取楼栋下面的房间数据
      getRoomList(pid){
        getRoomInfoList({  
          'pageVo': {
              'pageSize': this.page.pageSize,
              'pageNo': this.page.currentPage
          },
          'pid':pid,
          'projectId': this.currentProject.projectId}).then(res =>{
            this.tableData=res.data.resultList;
            this.page.total=res.data.pageVo.total;
        })
      },
      formatDate(row, column) {
        let date = new Date(row.createTime)
        return formatDate1(date)
      },    
      newItem(data) {
        this.selected = data.projectBuildingId;
        /*楼层房间号获取*/
        this.getRoomList(data.projectBuildingId);
        this.currentProjectBuildingId=data.projectBuildingId;
        this.currentBuildingName = data.measureSiteName;
      },
      resetForm(buildingForm) {
        this.dialogUpdateVisible = false
      },
      submit(form){
        debugger
        updateMeasureSiteInfoByMeasureSiteId(this.buildingForm).then(res =>{
           this.getRoomList(this.currentProjectBuildingId);
           this.dialogUpdateVisible = false
        })
      },
      //删除选中
      deleteSelect(row) {
        deleteMeasureSite(this.multipleSelection).then(res => {
          this.$message.success(res.message)
          this.getRoomList(this.currentProjectBuildingId);
        }).catch(res => {
          this.$message.error(res.message)
        })
      },
      //删除按钮
      deleteSelects(row) {
        deleteMeasureSite([row]).then(res => {
          this.$message.success(res.message)
          this.getRoomList(this.currentProjectBuildingId);
        }).catch(res => {
          this.$message.error(res.message)
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
     
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      handleSizeChange(val) {
        this.page.pageSize = val
        this.getRoomList(this.currentProjectBuildingId);
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.page.currentPage = val
        this.getRoomList(this.currentProjectBuildingId);
        console.log(`当前页: ${val}`)
      }
    },
    mounted() {
      this.getMeasureBuildingInfo()
    }
  }

</script>

<style lang="scss" scoped>
  .topWork {
    div {
      padding-left: 10px;
    }
    span {
      color: #DCDFE6;
      padding-left: 10px;
    }
  }

  .leftBuildingManagementTitle {
    border-bottom: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    height: 40px;
    line-height: 40px;
    margin-top: -10px;
    color: #909399;
    span {
      margin-left: 20px;
    }
  }

  .leftBuildingManagement {
    border-bottom: 1px solid #dcdfe6;
    height: 40px;
    line-height: 40px;
    color: #303133;
    cursor: pointer;
    &:hover {
      background-color: #F2F6FC;
    }
    span {
      margin-left: 20px;
    }
    i {
      /*padding-left: 30px;*/
      &:hover {
        cursor: pointer;
      }
    }
  }
</style>
